<template>
    <div class="user-avatar-dropdown">
        <Dropdown @on-click="handleClick">
            <Badge :dot="!!messageUnreadCount">
                <Avatar :src="userAvatar" />
            </Badge>
            <Icon :size="18" type="md-arrow-dropdown"></Icon>
            <DropdownMenu slot="list">
                <!-- <DropdownItem name="message">
          消息中心<Badge style="margin-left: 10px" :count="messageUnreadCount"></Badge>
        </DropdownItem> -->
                <DropdownItem name="restpass">修改密码</DropdownItem>
                <DropdownItem name="logout">退出登录</DropdownItem>
            </DropdownMenu>
        </Dropdown>
        <Modal v-model="modal" width="360" :mask-closable="false">
            <p slot="header" style="text-align:center">
                <span>修改密码</span>
            </p>
            <div style="text-align:center">
                <div class="mod_pass_form">
                    <div class="mod_pass_lable">
                        <p>新密码:</p>
                    </div>
                    <div>
                        <Input required type="password" v-model="newPassword" />
                    </div>
                </div>
                <div class="mod_pass_form">
                    <div class="mod_pass_lable">
                        <p>确认新密码:</p>
                    </div>
                    <div>
                        <Input required type="password" v-model="surePassword" />
                    </div>
                </div>
            </div>
            <div slot="footer">
                <Button type="default" @click="modal = false">取消</Button>
                <Button type="primary" @click="submit">确认</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import axios from '@/libs/api.request'
    import './user.less'
    import {
        mapActions
    } from 'vuex'
    export default {
        name: 'User',
        props: {
            userAvatar: {
                type: String,
                default: ''
            },
            messageUnreadCount: {
                type: Number,
                default: 0
            }
        },
        data() {
            return {
                eye_oldPassword: 'ios-eye',
                eye_newPassword: 'ios-eye',
                eye_surePassword: 'ios-eye',
                modal: false,
                newPassword: '',
                surePassword: ''
            }
        },
        methods: {
            ...mapActions([
                'handleLogOut'
            ]),
            logout() {
                this.handleLogOut().then(() => {
                    this.$router.push({
                        name: 'login'
                    })
                })
            },
            message() {
                this.$router.push({
                    name: 'message_page'
                })
            },
            handleClick(name) {
                switch (name) {
                    case 'logout':
                        this.logout()
                        break
                    case 'message':
                        this.message()
                        break
                    case 'restpass':
                        this.modal = true
                        break
                }
            },

            submit() {
                if (this.newPassword !== this.surePassword) {
                    this.$Notice.error({
                        title: '两次密码不一致,请重新输入',
                        duration: 3
                    })
                    this.newPassword = ''
                    this.surePassword = ''
                    return false
                }
                let data = {
                    new_password: this.newPassword,
                    sure_password: this.surePassword
                }
                axios.ajax_post('admin-login-ajax_save_password', data).then(response => {
                    if (response.data.code === 1) {
                        this.$Notice.success({
                            title: '修改成功',
                            duration: 3
                        })
                        this.modal = false
                        this.newPassword = ''
                        this.surePassword = ''

                        // this.$store.commit('setToken', '')
                        // this.$router.push({
                        //     name: 'login'
                        // });

                        this.logout()
                    } else {
                        this.$Notice.error({
                            title: response.data.msg,
                            duration: 3
                        })
                    }
                })
            }
        }
    }
</script>
<style>
    .mod_pass_form {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 50px;
        box-sizing: border-box;
        align-items: center;
        justify-content: center;
    }

    .mod_pass_lable {
        width: 25%;
        font-size: 14px;
        margin-right: 10px;
        text-align: right;
    }
</style>